<% include("/header.html", {active:'radio',title:'百味电台-舒缓你现在的心情!'}){} %>
<link rel="stylesheet" href="${cdn}/assets/css/player/reset.css">
<link rel="stylesheet" href="${cdn}/assets/css/player/style.css">
<link rel="stylesheet" href="${cdn}/assets/css/radio.css">

<div class="sec bnspic">
	<div class="big_pic">
		<ul>
			<%for(radio in pageData!){
					if(radioLP.index == 1){%>
						<li class="on">
					<%} else{%>
						<li>
					<%}%>
						<a href="#"><img src="${radio.cover_pic_url}" title="${radio.title}" width="681" height="362"/>
							<span class="txt">${radio.introduce}</span>
						</a>
					</li>
			<%}%>
		</ul>
	</div><!-- /big_pic -->
	<div class="small_pic clearfix">
		<ul>
			<%for(radio in pageData!){
				if(radioLP.index == 1){%>
					<li class="on">
				<%} else{%>
					<li>
				<%}%>
					<a href="#"><img src="${radio.cover_small_url}" alt="${radio.title}" width="158" height="120"/></a>
				</li>
			<%}%>
		</ul>
	</div><!-- /small_pic -->
</div>

<div id="main">
	<section class="cards">
            <div class="col-md-2 col-sm-2 col-lg-2">
              <a href="###" class="card">
                <img src="${cdn}/assets/img/img2.jpg" alt="">
                <strong class="card-heading">图片标题飞</strong>
              </a>
            </div>
            <div class="col-md-2 col-sm-2 col-lg-2">
              <a href="###" class="card">
                <img src="${cdn}/assets/img/img2.jpg" alt="">
                <strong class="card-heading">Lorem ipsum dolor sit.</strong>
              </a>
            </div>
            <div class="col-md-2 col-sm-2 col-lg-2">
              <a href="###" class="card">
                <img src="${cdn}/assets/img/img2.jpg" alt="">
                <strong class="card-heading">Lorem ipsum dolor sit.</strong>
              </a>
            </div>
            <div class="col-md-2 col-sm-2 col-lg-2">
              <a href="###" class="card">
                <img src="${cdn}/assets/img/img2.jpg" alt="">
                <strong class="card-heading">Lorem ipsum dolor sit.</strong>
              </a>
            </div>
            <div class="col-md-2 col-sm-2 col-lg-2">
              <a href="###" class="card">
                <img src="${cdn}/assets/img/img2.jpg" alt="">
                <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
              </a>
            </div>
            <div class="col-md-2 col-sm-2 col-lg-2">
              <a href="###" class="card">
                <img src="${cdn}/assets/img/img2.jpg" alt="">
                <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
              </a>
            </div>
            <div class="col-md-2 col-sm-2 col-lg-2">
              <a href="###" class="card">
                <img src="${cdn}/assets/img/img2.jpg" alt="">
                <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
              </a>
            </div>
            <div class="col-md-2 col-sm-2 col-lg-2">
              <a href="###" class="card">
                <img src="${cdn}/assets/img/img2.jpg" alt="">
                <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
              </a>
            </div>
            <div class="col-md-2 col-sm-2 col-lg-2">
              <a href="###" class="card">
                <img src="${cdn}/assets/img/img2.jpg" alt="">
                <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
              </a>
            </div>
            <div class="col-md-2 col-sm-2 col-lg-2">
              <a href="###" class="card">
                <img src="${cdn}/assets/img/img2.jpg" alt="">
                <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
              </a>
            </div>
            <div class="col-md-2 col-sm-2 col-lg-2">
              <a href="###" class="card">
                <img src="${cdn}/assets/img/img2.jpg" alt="">
                <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
              </a>
            </div>
            <div class="col-md-2 col-sm-2 col-lg-2">
              <a href="###" class="card">
                <img src="${cdn}/assets/img/img2.jpg" alt="">
                <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
              </a>
            </div>
          </section>
</div>
<script>
	$(".small_pic li").mouseover(function(){
		$(this).siblings().removeClass("on");
		$(this).addClass("on");
		var preNumber=$(this).prevAll().size()+1;
		$(".big_pic li").removeClass("on");
		$(".big_pic li:nth-child("+preNumber+")").addClass("on");
	});
</script>
<script src='${cdn}/assets/js/jq/jquery.jplayer.min.js'></script>
<script src='${cdn}/assets/js/jq/jplayer.playlist.min.js'></script>
<script src='${cdn}/assets/js/jq/lyz.delayLoading.min.js'></script>
<% include("/footer.html", {jsList:['front/radio.js']}){} %>
